<template>
  <ReModal
    class="create-box"
    width="70%"
    :visible="visible"
    :title="title"
    :beforeClose="modalOnHide"
    :onHide="modalOnHide"
    :onOk="modalOnOk"
    :isLoading="loading"
  >
    <template v-slot:childDom>
      <div>
        <el-form
          class="create-form-box"
          ref="createForm"
          :rules="rules"
          :model="createFormData"
          label-width="120px"
        >
          <el-form-item label="地址" prop="addressName">
            <el-input
              size="small"
              v-model="createFormData.addressName"
              placeholder="请输入地址"
              maxlength="128"
            />
          </el-form-item>
          <!-- <el-form-item label="市" prop="cityName">
            <el-input
              size="small"
              v-model="createFormData.cityName"
              placeholder="请输入市"
              maxlength="128"
            />
          </el-form-item>
          <el-form-item label="区" prop="countyName">
            <el-input
              size="small"
              v-model="createFormData.countyName"
              placeholder="请输入区"
              maxlength="128"
            />
          </el-form-item> -->
          <el-form-item
            class="item-100"
            label="代理商信息"
            prop="counsellorItemVOList"
          >
            <InputFrame
              v-model="createFormData.counsellorItemVOList"
              mode="double"
              button-text="添加"
              placeholder1="请输入代理商名称"
              placeholder2="请输入代理商手机"
            >
              <template v-slot:label1>
                <div style="width: 116px">代理商名称：</div>
              </template>
              <template v-slot:label2>
                <div style="width: 116px">代理商手机：</div>
              </template>
            </InputFrame>
          </el-form-item>
          <!-- <el-form-item label="代理商名称" prop="counsellorName">
            <el-input
              size="small"
              v-model="createFormData.counsellorName"
              placeholder="请输入代理商名称"
              maxlength="128"
            />
          </el-form-item>
          <el-form-item label="代理商手机" prop="counsellorPhone">
            <el-input
              size="small"
              v-model="createFormData.counsellorPhone"
              placeholder="请输入代理商手机"
              maxlength="128"
            />
          </el-form-item> -->
        </el-form>
      </div>
    </template>
  </ReModal>
</template>

<script>
import ReModal from "@/components/ReModal/index.vue";
import InputFrame from "@/views/system/equipment/components/InputFrame/index.vue";
import { addAddress, editAddress } from "@/api/address-info-manage.js";

export default {
  components: {
    ReModal,
    InputFrame,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      tyep: String,
      default: "add",
    },
    item: {
      tyep: Object,
      default: {},
    },
  },
  computed: {
    title() {
      return `${this.type === "add" ? "新增" : "编辑"}地址`;
    },
  },
  data() {
    return {
      createFormData: {
        addressName: "",
        counsellorName: "",
        counsellorPhone: "",
        counsellorItemVOList: [],
      },
      rules: {
        addressName: [
          { required: true, message: "请输入地址", trigger: "blur" },
        ],
        counsellorName: [
          { required: true, message: "请输入代理商名称", trigger: "blur" },
        ],
        counsellorPhone: [
          { required: true, message: "请输入代理商手机", trigger: "blur" },
        ],
      },
      loading: false,
    };
  },
  created() {
    const { id, counsellorItemVOList } = this.item;
    if (id) {
      this.createFormData = {
        ...this.item,
        counsellorItemVOList: counsellorItemVOList.map((item, index) => {
          return {
            value1: item.counsellorName,
            value2: item.counsellorPhone,
            id: new Date().getTime() + index,
          };
        }),
      };
    }
  },
  methods: {
    modalOnOk() {
      this.$refs.createForm.validate(async (valid) => {
        if (valid) {
          const par = {
            ...this.createFormData,
          };
          const { counsellorItemVOList } = par;
          if (
            Array.isArray(counsellorItemVOList) &&
            counsellorItemVOList.length
          ) {
            par.counsellorItemVOList = counsellorItemVOList.map((item) => {
              return {
                counsellorName: item.value1,
                counsellorPhone: item.value2,
              };
            });
          }
          this.loading = true;
          let api = this?.item?.id ? editAddress : addAddress;
          api(par)
            .then(() => {
              this.$message.success(this?.item?.id ? "编辑成功" : "新增成功");
              this.$emit("onOk");
            })
            .finally(() => {
              setTimeout(() => {
                this.loading = false;
              }, 200);
            });
        }
      });
    },
    modalOnHide() {
      this.$emit("onHide");
    },
  },
};
</script>
<style scoped lang="scss">
.create-box {
  ::v-deep.create-form-box {
    display: flex;
    flex-wrap: wrap;
    > div {
      flex: 0 0 50%;
      .el-input {
        width: 100%;
      }
      .el-select {
        width: 100%;
      }
    }
    .item-100 {
      flex: 0 0 100%;
    }
  }
}
</style>
